<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二手交易平台</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #fff9e6;
}

/* 顶部导航栏 */
.header {
    background: #333;
    padding: 10px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.logo {
    width: 120px;
    margin-right: 20px;
}

.logo img {
    width: 100%;
    height: auto;
}

/* 搜索框样式 */
.search-bar {
    flex: 1;
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 24px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-bar input {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 24px 0 0 24px;
    outline: none;
    font-size: 14px;
}

.search-bar button {
    padding: 12px 24px;
    background: #ff6b00;
    color: white;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
}

.search-bar button:hover {
    background: #ff8533;
    transform: translateY(-1px);
}

/* 用户操作区 */
.user-info {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.not-logged-in {
    display: flex;
    gap: 20px;
}

.not-logged-in a {
    color: white;
    text-decoration: none;
}

.logged-in {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-menu {
    position: relative;
    padding: 5px;
}

.user-avatar {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: white;
    position: relative;
}

.user-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}

.nav-links {
    display: flex;
    gap: 20px;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.nav-link.highlight {
    color: #ff6b00;
}

.nav-link.highlight:hover {
    background: rgba(255, 107, 0, 0.1);
}

.message-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4d4f;
    color: white;
    font-size: 12px;
    padding: 0 4px;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    box-shadow: 0 2px 4px rgba(255, 77, 79, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.nav-link i {
    font-size: 16px;
    transition: transform 0.3s;
}

.nav-link:hover i {
    transform: scale(1.1);
}

.nav-link span {
    font-size: 14px;
}

.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 8px 0;
    min-width: 120px;
    margin-top: 5px;
    &::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
        background: transparent;
    }
}

.menu-dropdown a {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
}

.menu-dropdown a:hover {
    background: #fff0e6;
    color: #ff4400;
}

.menu-dropdown.show {
    display: block;
}

.user-menu:hover .menu-dropdown {
    display: block;
}

/* 主要内容区 */
.main-container {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 0 20px;
}

/* 内容包装器 */
.content-wrapper {
    display: flex;
    gap: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
    overflow: visible;
    margin-bottom: 0;  /* 移除底部间距 */
}

/* 左侧分类导航 */
.category-sidebar {
    width: 200px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eee;
    height: 480px;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* 分类项样式 */
.category-item {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    font-size: 13px;
    border-left: 2px solid transparent;
}

.category-item:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.category-item:hover {
    background: linear-gradient(to right, #fff9e6, #fff);
    border-left-color: #ffd700;
}

.category-item i {
    width: 24px;
    font-size: 16px;
    margin-right: 12px;
    color: #666;
    text-align: center;
    transition: all 0.3s;
}

.category-item:hover i {
    color: #ff6b00;
    transform: scale(1.1);
}

.category-item span {
    flex: 1;
    font-size: 13px;
    color: #333;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-item:hover span {
    color: #ff6b00;
}

.category-item .arrow {
    margin-left: auto;
    color: #999;
    font-size: 12px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.category-item:hover .arrow {
    transform: translateX(3px);
    color: #ff6b00;
}

/* 右侧内容区 */
.right-content {
    flex: 1;
    height: 480px;
    overflow: visible;
    position: relative;
    z-index: 50;
}

/* 广告布局 */
.banner-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
    height: 180px;
}

/* 主要广告样式 */
.banner-main {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    background: linear-gradient(45deg, #ff6b6b, #ffd93d);
    cursor: pointer;
    transition: transform 0.3s;
}

.banner-main:hover {
    transform: translateY(-5px);
}

.ai-recommend {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.auction {
    background: linear-gradient(45deg, #ff6b6b, #ffd93d);
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 100%;
    padding: 20px;
}

.banner-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.banner-text h3 {
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: bold;
}

.banner-text p {
    font-size: 16px;
    opacity: 0.9;
}

/* 小广告容器 */
.ad-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    height: 285px;
    margin-bottom: 0;
}

.ad-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ad-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ad-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.product-preview {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: auto;
}

.preview-item {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    height: 160px;
}

.preview-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.preview-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}

.preview-price {
    color: #ff6b00;
    font-size: 14px;
    font-weight: bold;
}

/* 广告类型特定样式 */
.digital .ad-icon {
    background: #e3f2fd;
    color: #2196f3;
}

.fashion .ad-icon {
    background: #fff3e0;
    color: #ff9800;
}

.gaming .ad-icon {
    background: #f3e5f5;
    color: #9c27b0;
}

.media .ad-icon {
    background: #e8f5e9;
    color: #4caf50;
}

/* 筛选标签区 */
.filter-section {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 12px 15px;
    margin-top: 15px;
}

.filter-tags {
    display: flex;
    gap: 10px;
}

.filter-tag {
    padding: 6px 15px;
    border-radius: 15px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    border: 1px solid #eee;
}

.filter-tag.active {
    background: #ff6e30;
    color: white;
    border-color: #ff6e30;
}

/* 商品展示区 */
.product-section {
    padding: 30px;
    margin-top: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    width: 100%;  /* 确保宽度和上面内容区域一致 */
}

/* 商品列表 */
.product-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 0;  /* 移除距，使用父元素的内边距 */
}

.product-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* 商品图片容器样式 */
.product-img-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 8px 8px 0 0;
}

/* 商品图片样式 */
.product-img {
    position: relative;
    padding-top: 100%; /* 保持1:1的宽高比 */
    width: 100%;
    height: 0; /* 重要：设置高度为0，让padding-top来控制高度 */
    overflow: hidden;
}

.product-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-img[src='img/placeholder-product.png'] {
    object-fit: contain;
    padding: 10px;
}

.product-item:hover .product-img {
    transform: scale(1.05);
}

.view-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.view-count svg {
    font-size: 12px;
    width: 14px;
    height: 14px;
}

.view-count span {
    color: #666;
    font-size: 12px;
}

.product-info {
    padding: 12px;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-title {
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    margin: 0;
}

.product-desc {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.price-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price {
    color: #ff1648;
    font-size: 16px;
    font-weight: bold;
}

.price::before {
    font-size: 12px;
    margin-right: 2px;
}

.original-price {
    color: #999;
    font-size: 12px;
    text-decoration: line-through;
    margin-left: 8px;
}

.original-price::before {
}

.seller-info {
    display: flex;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #f5f5f5;
    margin-top: auto;
}

.seller-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
}

.seller-detail {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.seller-name {
    color: #666;
    font-size: 12px;
}

.seller-badge {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 2px;
    background: #fff1f0;
    color: #ff4d4f;
}

.no-image {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #999;
    font-size: 14px;
}

/* 响应式布局 */
@media (max-width: 1200px) {
    .product-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .product-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .category-sidebar {
        display: none;
    }
    
    .product-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 分类组样式 */
.category-group {
    position: relative;
    width: 100%;
    z-index: 100;
}

/* 详细分类面板 */
.category-detail {
    position: absolute;
    left: 100%;
    top: 0;
    width: 500px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    padding: 20px;
    display: none;
    z-index: 1000;
    min-height: 100%;
}

/* 分类组hover时显示详细分类 */
.category-group:hover {
    background-color: #f5f5f5;
    z-index: 1001;
}

.category-group:hover .category-detail {
    display: block;
}

/* 详细分类标题 */
.detail-section {
    margin-bottom: 15px;
}

.detail-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin-bottom: 12px;
    padding-left: 10px;
    position: relative;
}

.detail-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: #ffd700;
    border-radius: 2px;
}

/* 详细分类列表 */
.detail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-list a {
    color: #666;
    text-decoration: none;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 15px;
    background: #f5f5f5;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.detail-list a:hover {
    background: #fff9e6;
    border-color: #ffd700;
    color: #333;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ����改商品���域和筛选标签的样式 */
.filter-tags {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.filter-tag {
    padding: 6px 20px;
    border-radius: 20px;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.filter-tag:hover {
    background: #f0f0f0;
}

.filter-tag.active {
    background: #ff6e30;
    color: white;
}

/* 猜你喜欢区域 */
.guess-you-like {
    margin-top: 20px;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
}

.section-title img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

/* 分类标签 */
.category-tags {
    display: flex;
    gap: 12px;
    margin: 0 0 20px 0;
    padding: 15px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-tags::-webkit-scrollbar {
    display: none;
}

.category-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    color: #666;
}

.category-tag i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.category-tag:hover {
    background: #fff0e6;
    color: #ff6b00;
    border-color: #ffd7b3;
    transform: translateY(-1px);
}

.category-tag:hover i {
    transform: scale(1.1);
}

.category-tag.active {
    background: #ff6b00;
    color: white;
    border-color: #ff6b00;
    box-shadow: 0 2px 6px rgba(255, 107, 0, 0.2);
}

.category-tag.active i {
    transform: scale(1.1);
}

/* 添加底部装饰线 */
.category-tags::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(to right, 
        transparent,
        rgba(255, 215, 0, 0.5),
        transparent
    );
}

.category-tag {
    padding: 8px 16px;
    border-radius: 20px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    border: 1px solid #eee;
    white-space: nowrap;
}

.category-tag.active {
    background: #ffd700;
    color: #333;
    border-color: #ffd700;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.2);
}

/* 添加滚动阴影效果 */
.category-tags::before,
.category-tags::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 1;
}

.category-tags::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}

.category-tags::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
}

.tag-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* 商品列表样式 */
.product-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.product-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
    cursor: pointer;
}

.product-item:hover {
    transform: translateY(-3px);
}

.product-img {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
}

.product-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    padding: 12px;
}

.product-title {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price {
    color: #ff4d4f;
    font-size: 16px;
    font-weight: bold;
}

.want-count {
    color: #999;
    font-size: 12px;
}

.seller-info {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #666;
}

.seller-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 6px;
}

.seller-level {
    color: #ff6e30;
    margin-left: auto;
}

.no-products {
    text-align: center;
    padding: 40px;
    color: #999;
    font-size: 14px;
}

/* 右侧悬浮模块 */
.fixed-buttons {
    position: fixed;
    right: 20px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1000;
}

.fixed-button {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s;
    color: #666;
}

.fixed-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    color: #ff6b00;
}

.fixed-button i {
    font-size: 20px;
}

.tooltip {
    position: absolute;
    right: 60px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}

.fixed-button:hover .tooltip {
    opacity: 1;
    transform: translateX(-5px);
}

/* 分类详情面板 */
.category-detail {
    position: absolute;
    left: 100%;
    top: 0;
    width: 400px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    padding: 20px;
    display: none;
    z-index: 1000;
}

.category-item:hover .category-detail {
    display: block;
}

.detail-section {
    margin-bottom: 15px;
}

.detail-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
    padding-left: 8px;
    border-left: 3px solid #ffd700;
}

.detail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.detail-list a {
    color: #666;
    text-decoration: none;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 15px;
    background: #f5f5f5;
    transition: all 0.3s;
}

.detail-list a:hover {
    background: #ffd700;
    color: #333;
}

/* 修改广告项样式 */
.ad-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ad-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 商品预览区域样式 */
.product-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.preview-item {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s;
}

.preview-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.preview-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.preview-price {
    margin-top: 5px;
    color: #ff6b00;
    font-size: 14px;
    font-weight: bold;
}

</style>
<body>
    <!-- 顶部导航 -->
    <div class="header">
        <div class="header-content">
            <div class="search-bar">
                <input type="text" id="searchInput" placeholder="搜索你想要的商品">
                <button onclick="searchProducts()">搜索</button>
            </div>
            <div class="user-info">
                <div class="not-logged-in" style="display: none;">
                    <a href="login.html">登录</a>
                    <a href="register.html">注册</a>
                </div>
                <div class="logged-in" style="display: none;">
                    <div class="user-menu">
                        <div class="user-avatar">
                            <img src="img/default-avatar.png" alt="用户头像" id="userAvatar">
                            <span id="userName"></span>
                        </div>
                        <div class="menu-dropdown">
                            <a href="mine.html">我的主页</a>
                            <a href="javascript:void(0)" onclick="logout()">退出登录</a>
                        </div>
                    </div>
                    <div class="nav-links">
                        <a href="order.html" class="nav-link">
                            <i class="fas fa-clipboard-list"></i>
                            <span>订单</span>
                        </a>
                        <a href="chat.html" class="nav-link">
                            <i class="fas fa-comment-dots"></i>
                            <span>消息</span>
                            <span class="message-badge" id="messageBadge" style="display: none;">0</span>
                        </a>
                        <a href="publish-select.html" class="nav-link highlight">
                            <i class="fas fa-plus-circle"></i>
                            <span>发布</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-container">
        <div class="content-wrapper">
            <!-- 左侧分类导航 -->
            <div class="category-sidebar">
                <!-- 手机/数码/电脑 -->
                <div class="category-item">
                    <i class="fas fa-mobile-alt"></i>
                    <span>手机 / 数码 / 电脑</span>
                    <i class="arrow fas fa-chevron-right"></i>
                    <div class="category-detail">
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=1.101')">手机</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.101.1001')">iPhone</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.101.1002')">小米</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.101.1003')">华为</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.101.1004')">OPPO</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.101.1005')">vivo</a>
                            </div>
                        </div>
                        
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=1.102')">电脑</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.102.1006')">笔记本</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.102.1007')">台式机</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.102.1008')">平板电脑</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.102.1009')">一体机</a>
                            </div>
                        </div>

                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=1.103')">数码配件</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.103.10010')">耳机</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.103.10011')">充电器</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.103.10012')">手机壳</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=1.103.10013')">存储卡</a>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- 服饰/箱包/运动 -->
                <div class="category-item">
                    <i class="fas fa-tshirt"></i>
                    <span>服饰 / 箱包 / 运动</span>
                    <i class="arrow fas fa-chevron-right"></i>
                    <div class="category-detail">
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=2.201')">服饰</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.201.2001')">上衣</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.201.2002')">裤装</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.201.2003')">裙装</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.201.2004')">外套</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=2.202')">箱包</div>
                            <div class="detail-list">
                                
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.202.2005')">双肩包</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.202.2006')">手提包</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.202.2007')">旅行箱</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.202.2008')">钱包</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=2.203')">运动</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.203.2009')">运动服</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.203.2010')">运动鞋</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.203.2011')">健身器材</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=2.203.2012')">户外装备</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 技能/卡券/潮玩 -->
                <div class="category-item">
                    <i class="fas fa-ticket-alt"></i>
                    <span>技能 / 卡券 / 潮玩</span>
                    <i class="arrow fas fa-chevron-right"></i>
                    <div class="category-detail">
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=3.301')">技能服务</div>
                            <div class="detail-list">
                               
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=3.301.3001')">编程开发</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=3.301.3002')">文案写作</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=3.301.3003')">翻译服务</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=3.302')">卡券</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=3.302.3004')">美食卡券</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=3.302.3005')">电影票券</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=3.302.3006')">游戏点卡</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=3.302.3007')">购物卡券</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=3.303')">潮玩收藏</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=3.303.3008')">手办模型</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=3.303.3009')">卡牌收藏</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=3.303.3010')">盲盒玩具</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 母婴/美妆/个护 -->
                <div class="category-item">
                    <i class="fas fa-baby"></i>
                    <span>母婴 / 美妆 / 个护</span>
                    <i class="arrow fas fa-chevron-right"></i>
                    <div class="category-detail">
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=4.401')">母婴</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=4.401.4001')">婴儿服饰</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=4.401.4002')">婴儿护理</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=4.401.4003')">奶粉辅食</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=4.402')">玩具</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=4.402.4004')">益智玩具</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=4.402.4005')">积木拼装</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=4.402.4006')">毛绒玩具</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=4.402.4007')">遥控玩具</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=4.403')">食品</div>
                            <div class="detail-list">
                                
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=4.403.4008')">零食</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=4.403.4009')">饮料</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=4.403.4010')">坚果</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=4.403.4011')">糖果</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 家具/家电/家装 -->
                <div class="category-item">
                    <i class="fas fa-couch"></i>
                    <span>家具 / 家电 / 家装</span>
                    <i class="arrow fas fa-chevron-right"></i>
                    <div class="category-detail">
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=5.501')">家具</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=5.501.5001')">沙发</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=5.501.5002')">床铺</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=5.501.5003')">桌椅</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=5.501.5004')">柜子</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=5.502')">家电</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=5.502.5005')">电视</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=5.502.5006')">冰箱</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=5.502.5007')">洗衣机</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=5.502.5008')">空调</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 文玩/珠宝/礼品 -->
                <div class="category-item">
                    <i class="fas fa-gem"></i>
                    <span>文玩 / 珠宝 / 礼品</span>
                    <i class="arrow fas fa-chevron-right"></i>
                    <div class="category-detail">
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=6.601')">文玩收藏</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=6.601.6001')">玉石</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=6.601.6002')">木器</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=6.601.6003')">茶具</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=6.601.6004')">邮票</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=6.602')" >珠宝首饰</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=6.602.6005')">项链</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=6.602.6006')">戒指</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=6.602.6007')">耳饰</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=6.602.6008')">手链</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 食品/宠物/花卉 -->
                <div class="category-item">
                    <i class="fas fa-utensils"></i>
                    <span>食品 / 宠物 / 花卉</span>
                    <i class="arrow fas fa-chevron-right"></i>
                    <div class="category-detail">
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=7.701')">食品</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.701.7001')">零食小吃</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.701.7002')">饮料冲调</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.701.7003')">营保健</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.701.7004')">地方特产</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=7.702')">宠物用品</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.702.7005')">宠物食品</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.702.7006')">宠物玩具</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.702.7007')">护理用品</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.702.7008')">窝垫装备</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=7.703')" >花卉园艺</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.703.7009')">鲜花绿植</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.703.7010')">园艺工具</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.703.7011')">花盆花器</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=7.703.7012')">种子种苗</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 图书/游戏/音像 -->
                <div class="category-item">
                    <i class="fas fa-book"></i>
                    <span>图书 / 游戏 / 音像</span>
                    <i class="arrow fas fa-chevron-right"></i>
                    <div class="category-detail">
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=8.801')">图书</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.801.8001')">文学小说</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.801.8002')">教育考试</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.801.8003')">少儿读物</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.801.8004')">生活艺术</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=8.802')">游戏</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.802.8005')">游戏主机</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.802.8006')">游戏卡带</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.802.8007')">游戏外设</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.802.8008')">游戏周边</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=8.803')">音像</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.803.8009')">音乐CD</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.803.8010')">电影DVD</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.803.8011')">乐器设备</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=8.803.8012')">黑胶唱片</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 汽车/电动车/租房 -->
                <div class="category-item">
                    <i class="fas fa-car"></i>
                    <span>汽车 / 电动车 / 租房</span>
                    <i class="arrow fas fa-chevron-right"></i>
                    <div class="category-detail">
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=9.901')">汽车</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.901.9001')">汽车配件</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.901.9002')">车载用品</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.901.9003')">养护用品</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.901.9004')">维修工具</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=9.902')">电动车</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.902.9005')">电动自车</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.902.9006')">电动滑板车</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.902.9007')">配件维修</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.902.9008')">电池充电</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=9.903')" >租房</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.903.9009')">整租房源</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.903.9010')">合租房源</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.903.9011')">短租日租</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=9.903.9012')">办公商铺</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 五金/设备/农牧 -->
                <div class="category-item">
                    <i class="fas fa-tools"></i>
                    <span>五金 / 设备 / 农牧</span>
                    <i class="arrow fas fa-chevron-right"></i>
                    <div class="category-detail">
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=10.1001')">五金工具</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1001')">手动工具</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1002')">电动工具</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1003')">测量工具</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1004')">五金配件</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=10.1005')">机械设备</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1005')">加工设备</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1006')">包装设备</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1007')">印刷设备</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1008')">食品机械</a>
                            </div>
                        </div>
                        <div class="detail-section">
                            <div class="detail-title" onclick="window.open('category.html?categoryPath=10.1009')">农牧养殖</div>
                            <div class="detail-list">
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1009')">农机设备</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1010')">农具工具</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1011')">饲料兽药</a>
                                <a href="javascript:void(0)" onclick="window.open('category.html?categoryPath=10.1012')">种子种苗</a>
                            </div>
                        </div>
                    </div>
                </div>

                
            </div>

            <!-- 右侧内容区 -->
            <div class="right-content">
                <!-- 主广告区域 -->
                <div class="banner-container">
                    <!-- AI智能推荐 -->
                    <div class="banner-main ai-recommend" onclick="location.href='ai-recommend.html'">
                        <div class="banner-content">
                            <div class="banner-icon">
                                <i class="fas fa-robot"></i>
                            </div>
                            <div class="banner-text">
                                <h3>AI智能推荐</h3>
                                <p>让AI帮你找到心仪好物</p>
                            </div>
                        </div>
                    </div>

                    <!-- 拍卖专区 -->
                    <div class="banner-main auction" onclick="location.href='auction.html'">
                        <div class="banner-content">
                            <div class="banner-icon">
                                <i class="fas fa-gavel"></i>
                            </div>
                            <div class="banner-text">
                                <h3>拍卖专区</h3>
                                <p>独特珍品 限时竞拍</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 小广告容器 -->
                <div class="ad-container" id="adContainer">
                    <!-- 广告项将通过JavaScript动态生成 -->
                </div>

                <style>
                    /* 修改广告容器样式 */
                    .ad-container {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 15px;
                        height: 285px;
                        margin-bottom: 0;
                    }

                    .ad-item {
                        background: white;
                        border-radius: 12px;
                        padding: 20px;
                        cursor: pointer;
                        transition: all 0.3s;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                    }

                    .ad-header {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        margin-bottom: 20px;
                    }

                    .product-preview {
                        flex: 1;
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 15px;
                        margin-top: auto;
                    }

                    .preview-item {
                        background: #f8f8f8;
                        border-radius: 8px;
                        padding: 10px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        transition: all 0.3s;
                        height: 160px;
                    }

                    .preview-item:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                    }

                    .preview-image {
                        width: 100%;
                        height: 120px;
                        object-fit: cover;
                        border-radius: 4px;
                        margin-bottom: 8px;
                    }

                    .preview-price {
                        color: #ff6b00;
                        font-size: 14px;
                        font-weight: bold;
                    }
                </style>

                <script>
                    // 定义所有可能的广告类型
                    const adTypes = [
                        {
                            type: 'digital',
                            title: '手机数码',
                            desc: '品质数码 超值特惠',
                            icon: 'fas fa-mobile-alt',
                            categoryPath: '1',
                            containerId: 'digitalProducts'
                        },
                        {
                            type: 'fashion',
                            title: '服饰穿搭',
                            desc: '潮流时尚 百搭单品',
                            icon: 'fas fa-tshirt',
                            categoryPath: '2',
                            containerId: 'fashionProducts'
                        },
                        {
                            type: 'gaming',
                            title: '游戏娱乐',
                            desc: '畅玩无限 快乐加倍',
                            icon: 'fas fa-gamepad',
                            categoryPath: '3',
                            containerId: 'gamingProducts'
                        },
                        {
                            type: 'media',
                            title: '影视音像',
                            desc: '视听盛宴 品质生活',
                            icon: 'fas fa-film',
                            categoryPath: '4',
                            containerId: 'mediaProducts'
                        }
                    ];

                    // 根据分类加载商品
                    function loadProductsByCategory(categoryPath, containerId) {
                        $.ajax({
                            url: '/product/filter',
                            type: 'GET',
                            data: {
                                categoryPath: categoryPath,
                                limit: 2,  // 只加载2个商品
                                sort: 'newest'
                            },
                            success: function(response) {
                                console.log("加载商品", response);
                                if (response.state === 1) {
                                    displayPreviewProducts(response.data, containerId);
                                }
                            }
                        });
                    }

                    // 显示预览商品
                    function displayPreviewProducts(products, containerId) {
                        const container = $(`#${containerId}`);
                        container.empty();

                        products.slice(0, 2).forEach(product => {  // 只显示2个商品
                            let image = 'img/placeholder-product.png';
                            if (product.images) {
                                try {
                                    const images = JSON.parse(product.images);
                                    if (images && images.length > 0) {
                                        image = images[0].startsWith('http') ? images[0] : '/upload/' + images[0];
                                    }
                                } catch (e) {
                                    console.error('解析图片失败:', e);
                                }
                            }

                            const previewHtml = `
                                <div class="preview-item" onclick="event.stopPropagation(); viewProductDetail(${product.id}, ${product.isAuction}, ${product.auctionId})">
                                    <img src="${image}" alt="${product.name}" 
                                         class="preview-image"
                                         onerror="this.src='img/placeholder-product.png';">
                                    <div class="preview-price">¥${parseFloat(product.price).toFixed(2)}</div>
                                </div>
                            `;
                            container.append(previewHtml);
                        });
                    }

                    // 添加商品详情页面跳转函数
                    function viewProductDetail(id, isAuction, auctionId) {
                        if (isAuction) {
                            window.location.href = `auction-detail.html?id=${auctionId}`;
                        } else {
                            window.location.href = `product-detail.html?id=${id}`;
                        }
                    }

                    // 显示随机广告
                    function displayRandomAds() {
                        const shuffled = adTypes.sort(() => 0.5 - Math.random());
                        const selectedAds = shuffled.slice(0, 2); // 取两个广告
                        const adContainer = $('#adContainer');
                        adContainer.empty();
                        
                        selectedAds.forEach(ad => {
                            adContainer.append(generateAdHtml(ad));
                            loadProductsByCategory(ad.categoryPath, ad.containerId);
                        });
                    }

                    // 生成广告HTML
                    function generateAdHtml(ad) {
                        return `
                            <div class="ad-item ${ad.type}">
                                <div class="ad-header" onclick="location.href='category.html?categoryPath=${ad.categoryPath}'">
                                    <div class="ad-icon">
                                        <i class="${ad.icon}"></i>
                                    </div>
                                    <div class="ad-info">
                                        <div class="ad-title">${ad.title}</div>
                                        <div class="ad-desc">${ad.desc}</div>
                                    </div>
                                </div>
                                <div class="product-preview" id="${ad.containerId}">
                                    <!-- 商品将通过JavaScript动态加载 -->
                                </div>
                            </div>
                        `;
                    }

                    // 在页面加载完成后执行
                    $(document).ready(function() {
                        displayRandomAds();
                        // 每隔一定时间更新广告
                        setInterval(displayRandomAds, 30000); // 30秒更新一次
                    });
                </script>
            </div>
        </div>

        <!-- 商品列表区域 -->
        <div class="product-section">
            <!-- 分类标签栏 -->
            <div class="category-tags">
                <div class="category-tag active">
                    <i class="fas fa-heart"></i>
                    猜你喜欢
                </div>
                <div class="category-tag">
                    <i class="fas fa-mobile-alt"></i>
                    手机数码
                </div>
                <div class="category-tag">
                    <i class="fas fa-tshirt"></i>
                    服饰穿搭
                </div>
                <div class="category-tag">
                    <i class="fas fa-gamepad"></i>
                    游戏娱乐
                </div>
                <div class="category-tag">
                    <i class="fas fa-book"></i>
                    图书文具
                </div>
                <div class="category-tag">
                    <i class="fas fa-home"></i>
                    家居日用
                </div>
                <div class="category-tag">
                    <i class="fas fa-gift"></i>
                    礼品收藏
                </div>
                <div class="category-tag">
                    <i class="fas fa-car"></i>
                    汽车用品
                </div>
            </div>

            <style>
                /* 更新分类标签样式 */
                .category-tags {
                    display: flex;
                    gap: 12px;
                    margin: 0 0 20px 0;
                    padding: 15px 20px;
                    background: white;
                    border-radius: 8px;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
                    overflow-x: auto;
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                }

                .category-tags::-webkit-scrollbar {
                    display: none;
                }

                .category-tag {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    padding: 8px 16px;
                    border-radius: 20px;
                    background: #f5f5f5;
                    cursor: pointer;
                    font-size: 14px;
                    transition: all 0.3s ease;
                    white-space: nowrap;
                    border: 1px solid transparent;
                    color: #666;
                }

                .category-tag i {
                    font-size: 14px;
                    transition: transform 0.3s ease;
                }

                .category-tag:hover {
                    background: #fff0e6;
                    color: #ff6b00;
                    border-color: #ffd7b3;
                    transform: translateY(-1px);
                }

                .category-tag:hover i {
                    transform: scale(1.1);
                }

                .category-tag.active {
                    background: #ff6b00;
                    color: white;
                    border-color: #ff6b00;
                    box-shadow: 0 2px 6px rgba(255, 107, 0, 0.2);
                }

                .category-tag.active i {
                    transform: scale(1.1);
                }
            </style>

            <!-- 商品列表 -->
            <div class="product-list" id="productList">
                <!-- 商品通JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <!-- 右侧悬浮模块 -->
    <div class="fixed-buttons">
        <div class="fixed-button" onclick="location.href='feedback.html'">
            <i class="fas fa-comment-dots"></i>
            <span class="tooltip">反馈</span>
        </div>
        <div class="fixed-button" onclick="scrollToTop()">
            <i class="fas fa-arrow-up"></i>
            <span class="tooltip">返回顶部</span>
        </div>
    </div>

    <script>
        // 加载商品列表
        function loadProducts() {
            $.ajax({
                url: "/product/recommended",
                type: "get",
                success: function(response) {
                    if (response.state === 1) {
                       console.log(response);
                        displayProducts(response);
                        
                    } else {
                        
                        console.error('加载商品失败:', response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('请求失败:', error);
                }
            });
        }

        // 显示商品列表
        function displayProducts(response) {
            const productList = $("#productList");
            productList.empty();
            
            const products = response.data || [];
            
            if (products.length === 0) {
                productList.html('<div class="no-products">暂无商品</div>');
                return;
            }
            
            products.forEach(product => {
                let firstImage = 'img/placeholder-product.png';
                try {
                    if (product.images) {
                        const images = JSON.parse(product.images);
                        if (images && images.length > 0) {
                            firstImage = images[0].startsWith('http') ? images[0] : '/upload/' + images[0];
                        }
                    }
                } catch (e) {
                    console.error('解析图片JSON失败:', e);
                }
                
                const productHtml = `
                    <div class="product-item" onclick="location.href='product-detail.html?id=${product.id}'">
                        <div class="product-img-wrapper">
                            <div class="product-img">
                                <img src="${firstImage}" 
                                     alt="${product.name || '商品图片'}"
                                     onerror="this.src='img/placeholder-product.png';"
                                >
                                <div class="view-count">
                                    <svg viewBox="0 0 1024 1024" width="14" height="14">
                                        <path d="M512 896l-55.008-51.2c-188.416-171.52-310.272-284.16-310.272-423.936 0-113.792 86.528-200.704 199.488-200.704 62.976 0 123.52 29.696 165.792 76.8 42.24-47.104 102.784-76.8 165.76-76.8 112.96 0 199.488 86.912 199.488 200.704 0 139.776-121.856 252.416-310.272 423.936L512 896z" fill="#ff1648"/>
                                    </svg>
                                    <span>${product.favoriteCount || 0}</span>
                                </div>
                            </div>
                        </div>
                        <div class="product-info">
                            <div class="product-title">${product.name || '未命名商品'}</div>
                            <div class="product-desc">${product.description || ''}</div>
                            <div class="price-info">
                                <span class="price">¥${parseFloat(product.price || 0).toFixed(2)}</span>
                                ${product.originalPrice ? 
                                  `<span class="original-price">¥${parseFloat(product.originalPrice).toFixed(2)}</span>` 
                                  : ''}
                            </div>
                            <div class="seller-info">
                                <img class="seller-avatar" 
                                     src="${product.sellerAvatar}"
                                     alt="卖家头像" 
                                >
                                <div class="seller-detail">
                                    <span class="seller-name">${product.sellerNickname || '匿名用户'}</span>
                                    ${product.creditScore >= 4 ? 
                                      `<span class="seller-badge">用${product.creditScore >= 5 ? '极好' : '良好'}</span>` 
                                      : ''}
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                productList.append(productHtml);
            });
        }

        // 搜索商品
        function searchProducts() {
            const keyword = $("#searchInput").val().trim();
                if (!keyword) {
                return;  // 如果关键词为空，不执行搜索
            }

    // 将用户重定向到搜索结果页面，并传递关键词参数
    window.location.href = `search-results.html?keyword=${encodeURIComponent(keyword)}`;
    }

        // 搜索框回车事件
        $("#searchInput").on('keypress', function(e) {
            if(e.which === 13) {
                searchProducts();
            }
        });

        // 筛选商品
        function filterProducts(category) {
            if (category === '猜你喜欢') {
                loadProducts(); // 直接调用加载所有商品的函数
            } else {
                // 分类名称到分类路径的映射
                const categoryMapping = {
                    '手机数码': '1',
                    '服饰穿搭': '2',
                    '游戏娱乐': '3',
                    '图书文具': '8',
                    '家居日用': '5',
                    '礼品收藏': '6',
                    '汽车用品': '9'
                };

                const cleanCategory = category.trim();
                const categoryPath = categoryMapping[cleanCategory];

                if (!categoryPath) {
                    console.error('未找到对应的分类路径:', cleanCategory);
                    return;
                }

                let searchData = {
                    categoryPath: categoryPath
                };

                $.ajax({
                    url: "/product/filter",
                    type: "get",
                    data: searchData,
                    success: function(response) {
                        console.log("筛选参数:", searchData);
                        console.log("筛选商品成功:", response);
                        if(response.state === 1) {
                            displayProducts(response);
                        } else {
                            console.error('筛选商品失败:', response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('请求失败:', error);
                    }
                });
            }
        }

        // 页面加载完成后行
        $(document).ready(function() {
            // 检查登录状态
            checkLoginStatus();
            
            // 默认加载所有商品（猜你喜欢）
            loadProducts();
            
            // 添加分类标签点击事件
            $('.category-tag').click(function() {
                $('.category-tag').removeClass('active');
                $(this).addClass('active');
                
                const category = $(this).text().trim();
                if (category === '猜你喜欢') {
                    loadProducts();  // 直接加载推荐商品
                    return;
                }
                
                // 分类名称到分类路径的映射
                const categoryMapping = {
                    '手机数码': '1',
                    '服饰穿搭': '2',
                    '游戏娱乐': '3',
                    '图书文具': '8',
                    '家居日用': '5',
                    '礼品收藏': '6',
                    '汽车用品': '9'
                };

                const categoryPath = categoryMapping[category];
                if (!categoryPath) {
                    console.error('未找到对应的分类路径:', category);
                    return;
                }

                // 发送筛选请求
                $.ajax({
                    url: "/product/filter",
                    type: "get",
                    data: { categoryPath: categoryPath },
                    success: function(response) {
                        console.log("筛选参数:", { categoryPath });
                        console.log("筛选商品成功:", response);
                        if(response.state === 1) {
                            displayProducts(response);
                        } else {
                            console.error('筛选商品失败:', response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('请求失败:', error);
                    }
                });
            });

            // 点击头像显示菜单
            $('.user-avatar').click(function(e) {
                e.stopPropagation();
                $('.menu-dropdown').toggleClass('show');
            });

            // 点击菜单项时不要立即隐藏菜单
            $('.menu-dropdown a').click(function(e) {
                e.stopPropagation();
            });

            // 点击他区域隐藏菜单
            $(document).click(function(e) {
                if (!$(e.target).closest('.user-menu').length) {
                    $('.menu-dropdown').removeClass('show');
                }
            });

            // 鼠标移菜单区域时添加延迟后隐藏
            let hideTimeout;
            $('.user-menu').hover(
                function() {
                    clearTimeout(hideTimeout);
                    $('.menu-dropdown').addClass('show');
                },
                function() {
                    hideTimeout = setTimeout(function() {
                        $('.menu-dropdown').removeClass('show');
                    }, 200); // 修改为200ms的延迟
                }
            );

            // 当鼠标移入下拉菜单时，清除隐藏定时器
            $('.menu-dropdown').hover(
                function() {
                    clearTimeout(hideTimeout);
                },
                function() {
                    hideTimeout = setTimeout(function() {
                        $('.menu-dropdown').removeClass('show');
                    }, 200); // 修改为200ms的延迟
                }
            );

            // 给头像和用户名添加点击事件
            $('.user-avatar').on('click', function() {
                window.location.href = 'mine.html';
            });
        });

        // 添加新的函数用于在新窗口打开筛选结果
        function openFilterPage(category, subCategory) {
            // 创建询参数
            const params = new URLSearchParams({
                category: category,
                subCategory: subCategory
            });
            
            // 打开新窗口
            window.open(`filter-results.html?${params.toString()}`, '_blank');
        }

        // 添加检查登录状态的函数
        function checkLoginStatus() {
            $.ajax({
                url: '/user/get-user',
                type: 'GET',
                success: function(response) {
                    if (response.state === 1 && response.data) {
                        // 用户已登录
                        const user = response.data;
                        $('.not-logged-in').hide();
                        $('.logged-in').show();
                        $('#userAvatar').attr('src', user.avatar || 'img/default-avatar.png');  // 添加默认头像
                        $('#userName').text(user.nickname || user.username);
                        
                        // 检查未读消息
                        checkUnreadMessages();
                    } else {
                        // 用户未登录
                        $('.not-logged-in').show();
                        $('.logged-in').hide();
                    }
                },
                error: function() {
                    // 请求失败示未登录态
                    $('.not-logged-in').show();
                    $('.logged-in').hide();
                }
            });
        }

        // 退出登录
        function logout() {
            $.ajax({
                url: '/user/logout',
                type: 'POST',
                success: function(response) {
                    if (response.state === 1) {
                        location.href = 'login.html';
                    } else {
                        alert(response.msg || '退出失败');
                    }
                },
                error: function() {
                    alert('退出失败，请稍后重试');
                }
            });
        }

        // 检查滚动位置显示/隐藏回到顶部按钮
        $(window).scroll(function() {
            if ($(this).scrollTop() > 300) {
                $('.back-to-top').fadeIn();
            } else {
                $('.back-to-top').fadeOut();
            }
        });

        // 回到顶部功能
        function scrollToTop() {
            $('html, body').animate({
                scrollTop: 0
            }, 500);
        }

        // 检查未读消息
        function checkUnreadMessages() {
            $.ajax({
                url: '/chat/unread-count',
                type: 'GET',
                success: function(response) {
                    if (response.state === 1) {
                        const count = response.data;
                        const badge = $('#messageBadge');
                        if (count > 0) {
                            badge.text(count).fadeIn();
                        } else {
                            badge.hide();
                        }
                    }
                }
            });
        }

        // 加推荐商品
        function loadRecommendedProducts() {
            $.ajax({
                url: '/product/recommended',
                type: 'GET',
                success: function(response) {
                    if (response.state === 1) {
                        const products = response.data;
                        const container = $('#recommendedProducts');
                        container.empty();
                        
                        products.forEach(product => {
                            const images = JSON.parse(product.images);
                            const firstImage = images && images.length > 0 ? images[0] : 'default-product-image.jpg';
                            
                            const card = `
                                <div class="product-card" onclick="location.href='/product-detail.html?id=${product.id}'">
                                    <img src="${firstImage}" alt="${product.name}" class="product-image">
                                    <div class="product-info">
                                        <div class="product-name">${product.name}</div>
                                        <div class="product-price">${product.price}</div>
                                        <div class="view-count">浏览 ${product.viewCount} 次</div>
                                    </div>
                                </div>
                            `;
                            container.append(card);
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('加载推荐商品失败:', error);
                }
            });
        }

      
        

        // 页面加载完成后执行
        $(document).ready(function() {
           
            loadRecommendedProducts();
        });
    </script>
</body>
</html>
